<template>
    <div class="login-container">
      <h1>系统登录</h1>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label>用户名</label>
          <input v-model="form.account" type="text" required>
        </div>
        <div class="form-group">
          <label>密码</label>
          <input v-model="form.password" type="password" required>
        </div>
        <button type="submit" :disabled="loading">
          {{ loading ? '登录中...' : '立即登录' }}
        </button>
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from '@/api/axios'
  
  const router = useRouter()
  const form = ref({
    account: '',
    password: ''
  })
  const loading = ref(false)
  const errorMessage = ref('')
  
  const handleLogin = async () => {
    try {
      loading.value = true
      errorMessage.value = ''
      
      // 替换为你的实际API地址
      const response = await axios.post('/api/account/login', form.value, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
      
      localStorage.setItem('token', response.data.token)
      router.push('/home')
    } catch (error) {
      errorMessage.value = error.response?.data?.message || '登录失败，请检查网络'
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style scoped>
  .login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  
  input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  button {
    width: 100%;
    padding: 10px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:disabled {
    background-color: #a0cfff;
    cursor: not-allowed;
  }
  
  .error-message {
    color: red;
    margin-top: 10px;
  }
  </style>